<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花龙腾航 - 订单详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }
        
        .logo-text {
            background: linear-gradient(45deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .ticket-card {
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .ticket-card:hover {
            transform: translateY(-5px);
        }
        
        .flight-path {
            position: relative;
        }
        
        .flight-path::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, #3b82f6 50%, transparent 100%);
            z-index: 0;
        }
        
        .airplane-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #3b82f6;
            z-index: 1;
            background-color: white;
            padding: 0 10px;
        }
        
        .info-card {
            border-left: 4px solid #3b82f6;
        }

        .status-confirmed {
            background-color: #d1fae5;
            color: #065f46;
        }

        .status-pending {
            background-color: #fef3c7;
            color: #92400e;
        }

        .status-cancelled {
            background-color: #fee2e2;
            color: #991b1b;
        }

        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .user-avatar {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            min-width: 200px;
            z-index: 10;
        }

        .dropdown-menu.open {
            display: block;
        }

        .dropdown-item {
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .dropdown-item:hover {
            background-color: #f3f4f6;
        }
    </style>
</head>

<body class="bg-gray-50">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-plane text-3xl text-blue-500"></i>
                <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
            </div>
            <nav class="hidden md:flex space-x-6">
                <a href="user_index" class="text-gray-600 hover:text-blue-500">首页</a>
                <a href="user_flight_search" class="text-gray-600 hover:text-blue-500">航班查询</a>
                <a href="user_order" class="text-blue-500 font-medium">我的订单</a>
                <a href="user_ticket" class="text-gray-600 hover:text-blue-500">我的机票</a>
                <a href="user_member_center" class="text-gray-600 hover:text-blue-500">会员中心</a>
            </nav>
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
                    <div class="w-8 h-8 rounded-full user-avatar overflow-hidden">
                        <img th:if="${imageExists}" th:src="'static/images/'+${user.getU_id()}+'.jpg?version=' + ${#dates.createNow().time}" alt="用户头像" class="w-full h-full object-cover">
                        <img th:if="${!imageExists} and ${user.getSex()} == '女'" src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
                        <img th:if="${!imageExists} and ${user.getSex()} == '男'" src="https://randomuser.me/api/portraits/men/71.jpg" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    <span class="hidden md:inline text-gray-700 group-hover:text-blue-500" th:text="${user.getU_name()}">张先生</span>
                    <div class="dropdown-menu" id="dropdown-menu">
                        <div class="dropdown-item" onclick="location.href='user_profile'">
                            <i class="fas fa-user-cog mr-2"></i> 个人主页
                        </div>
                        <div class="dropdown-item" onclick="location.href='#'">
                            <i class="fas fa-cog mr-2"></i> 账号管理
                        </div>
                        <div class="border-t border-gray-200 my-1"></div>
                        <div class="dropdown-item text-red-500" onclick="location.href='user_logout'">
                            <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="mb-6 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-gray-900">订单详情</h1>
        </div>
        
        <!-- 订单状态卡片 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <div>
                    <h2 class="text-lg font-medium text-gray-900">订单状态</h2>
                    <span class="text-sm text-gray-500" th:text="'订单号: '+${order.getOrder_id()}">订单编号: HLTH20230615-123456</span>
                    <span class="text-sm text-gray-500" th:text="'&nbsp;&nbsp;&nbsp;&nbsp;用户: '+${username}"></span>
                    <span class="text-sm text-gray-500" th:text="'&nbsp;&nbsp;&nbsp;&nbsp;订单日期: '+${order.getDate()}">订单日期: 2023-06-15</span>
                </div>
                <!--span class="px-3 py-1 rounded-full text-xs font-semibold status-confirmed">
                    <i class="fas fa-check-circle mr-1"></i>已确认
                </span-->
                <span th:classappend="${order.getStatus()} == 'unpaid' ? 'bg-yellow-100 text-yellow-800' :
                                                                (${order.getStatus()} == 'paid' ? 'bg-green-100 text-green-800' :
                                                                (${order.getStatus()} == 'completed' ? 'bg-blue-100 text-blue-800' :
                                                                (${order.getStatus()} == 'cancelled' ? 'bg-red-100 text-red-800' :
                                                                'bg-purple-100 text-purple-800')))"
                      class="status-badge"
                      th:text="${order.getStatusText()}">已支付
                </span>
            </div>
            <div class="px-6 py-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div th:if="${order.getStatus() == 'paid'}">
                        <p class="text-sm text-gray-500">支付时间</p>
                        <p class="font-medium" th:text="${order.getPaymentDate()}">2023-06-15 14:30</p>
                    </div>
                    <div th:if="${order.getStatus() == 'paid'}">
                        <p class="text-sm text-gray-500">支付方式</p>
                        <p class="font-medium" th:text="${order.getPaymentMethod()}">支付宝</p>
                    </div>
                    <div th:if="${order.getStatus() == 'paid'}">
                        <p class="text-sm text-gray-500">支付金额</p>
                        <p class="font-medium text-blue-600" th:text="'¥ '+${order.getPrice()}">¥1,280.00</p>
                    </div>

                    <div th:if="${order.getStatus() == 'unpaid'}">
                        <p class="text-sm text-gray-500">最晚支付时间</p>
                        <p class="font-medium" th:text="'请在'+${order.getPaymentDeadline()}+'前完成支付'">2023-06-15 14:30</p>
                    </div>
                    <div th:if="${order.getStatus() == 'unpaid'}">
                        <p class="text-sm text-gray-500">需支付金额</p>
                        <p class="font-medium text-blue-600" th:text="'¥ '+${order.getPrice()}">¥1,280.00</p>
                    </div>

                    <div th:if="${order.getStatus() == 'completed'}">
                        <p class="text-sm text-gray-500">支付时间</p>
                        <p class="font-medium" th:text="${order.getPaymentDate()}">2023-06-15 14:30</p>
                    </div>
                    <div th:if="${order.getStatus() == 'completed'}">
                        <p class="text-sm text-gray-500">支付方式</p>
                        <p class="font-medium" th:text="${order.getPaymentMethod()}">支付宝</p>
                    </div>
                    <div th:if="${order.getStatus() == 'completed'}">
                        <p class="text-sm text-gray-500">支付金额</p>
                        <p class="font-medium text-blue-600" th:text="'¥ '+${order.getPrice()}">¥1,280.00</p>
                    </div>

                    <div th:if="${order.getStatus() == 'cancelled'}">
                        <p class="text-sm text-gray-500">取消时间</p>
                        <p class="font-medium" th:text="${order.getCancelDate()}">2023-06-15 14:30</p>
                    </div>
                    <div th:if="${order.getStatus() == 'cancelled'}">
                        <p class="text-sm text-gray-500">退款金额</p>
                        <p class="font-medium text-blue-600" th:text="'¥ '+${order.getPrice()}">¥1,280.00</p>
                    </div>
                    <div th:if="${order.getStatus() == 'refund'}">
                        <p class="text-sm text-gray-500">退款申请中</p>
                        <p class="font-medium text-blue-600" th:text="'申请于'+${order.getRefundDate()}"></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 乘客信息 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">乘客信息</h2>
            </div>
            <div class="divide-y divide-gray-200">
                <div class="px-6 py-4" th:each="passenger : ${passengers}">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                            <i class="fas fa-user text-blue-500"></i>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-md font-medium text-gray-900" th:text="${passenger.getPassenger_name()}">张三</h3>
                            <p class="text-sm text-gray-500" th:text="${passenger.getType()}">成人</p>
                        </div>
                    </div>
                    <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <p class="text-sm text-gray-500">证件号</p>
                            <p class="font-medium" th:text="${passenger.getID_type()}+': '+${passenger.getPassenger_ID_card()}"></p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">性别</p>
                            <p class="font-medium" th:text="${passenger.getPassenger_sex()}"></p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">年龄</p>
                            <p class="font-medium" th:text="${passenger.getPassenger_age()}"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 航班信息 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">航班信息</h2>
            </div>
            <div class="px-6 py-4" th:each="ticket : ${tickets}">
                <!-- 航班卡片 -->
                <div class="ticket-card bg-white rounded-lg border border-gray-200 overflow-hidden mb-6">
                    <div class="px-6 py-4 bg-blue-50 border-b border-gray-200">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="text-sm font-medium text-blue-800" th:text="${flight.getDeparture_date()}+' '+${flight.getDeparture_day()}">2023-06-20 周二</span>
                                <span class="ml-2 text-sm text-blue-600">直达航班</span>
                                <span class="text-sm text-gray-500">&nbsp;&nbsp;&nbsp;&nbsp;乘客</span>
                                <span class="text-sm text-gray-500" th:text="${ticket.getPassenger_name()}"></span>
                            </div>
                            <div class="text-sm text-blue-600">
                                <span class="text-sm text-blue-600" th:text="'飞行距离: '+${flight.getDistance()}+'km'">飞行距离: 2,000公里</span>
                                <span class="text-sm text-blue-600">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <span class="fas fa-clock mr-1"></span>
                                <span class="text-sm text-blue-600" th:text="${flight.getDuration()}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="px-6 py-4">
                        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                            <div class="flex-1">
                                <div class="flight-path relative flex items-center justify-between mb-4">
                                    <div class="text-center">
                                        <p class="text-2xl font-bold" th:text="${flight.getDeparture_city()}">PEK</p>
                                        <p class="text-sm text-gray-500" th:text="${flight.getDeparture_airport()}">北京首都国际机场</p>
                                        <p class="text-lg font-semibold mt-1" th:text="${flight.getDeparture_time()}">08:30</p>
                                    </div>
                                    <div class="airplane-icon">
                                        <i class="fas fa-plane"></i>
                                    </div>
                                    <div class="text-center">
                                        <p class="text-2xl font-bold" th:text="${flight.getArrival_city()}">SHA</p>
                                        <p class="text-sm text-gray-500" th:text="${flight.getArrival_airport()}">上海虹桥国际机场</p>
                                        <p class="text-lg font-semibold mt-1" th:text="${flight.getArrival_time()}">10:45</p>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 md:mt-0 md:ml-6">
                                <div class="bg-gray-50 p-3 rounded-lg">
                                    <p class="text-sm text-gray-500">航班号</p>
                                    <p class="font-medium" th:text="${flight.getFlight_id()}">HLTH 1234</p>
                                    <p class="text-sm text-gray-500 mt-2">舱位 - 座位</p>
                                    <p class="font-medium" th:text="${ticket.getSeat_type()}+' - '+${ticket.getSeat()}">经济舱 (Y)</p>
                                    <p class="text-sm text-gray-500 mt-2">登机口</p>
                                    <p th:if="${flight.getGate()} == null" class="font-medium">待定</p>
                                    <p th:if="${flight.getGate()} != null" class="font-medium" th:text="${flight.getGate()}">A01</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="px-6 py-3 bg-gray-50 border-t border-gray-200">
                        <div class="flex justify-between items-center">
                            <div class="text-sm text-gray-600">
                                <i class="text-sm text-gray-500" th:text="'行李额：1件'+${flight.getBaggage_limit()}"></i>
                            </div>
                            <div class="text-sm text-gray-600">
                                <i class="text-sm text-gray-500" th:text="'餐食: '+${flight.getMeal_money()}+' - '+${flight.getMeal()}"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 飞机信息 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-lg font-medium text-gray-900">飞机信息</h2>
            </div>
            <div class="px-6 py-4" th:each="plane : ${planes}">
                <div class="info-card bg-gray-50 p-4 rounded-lg">
                    <h3 class="text-md font-medium text-gray-900 mb-3" th:text="${plane.getP_airline()}">飞机</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-gray-500">机型</p>
                            <p class="font-medium" th:text="${plane.getP_model()}">空客 A320-200</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">机龄</p>
                            <p class="font-medium" th:text="${plane.getPlane_age()}+'年'">3.5年</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">WiFi</p>
                            <p th:if="${plane.getWiFi() == 'true'}" class="font-medium">免费提供</p>
                            <p th:if="${plane.getWiFi() == 'pay'}" class="font-medium">付费使用</p>
                            <p th:if="${plane.getWiFi() == 'no'}" class="font-medium">暂无提供</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">座位数</p>
                            <p class="font-medium" th:text="${plane.getCapacity()}+' ('+${plane.getFirst_seat()}+'头等/'+${plane.getBusiness_seat()}+'商务/'+${plane.getEconomy_seat()}+'经济)'">
                                158 (8商务/150经济)</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="flex justify-end space-x-4 mb-8">
            <a href="user_order" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-arrow-left mr-2">&nbsp;&nbsp;返回订单列表</i>
            </a>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-gray-50 mt-12">
        <div class="container mx-auto px-4 py-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fas fa-plane text-2xl text-blue-500"></i>
                        <h3 class="text-xl font-bold logo-text">花龙腾航</h3>
                    </div>
                    <p class="text-gray-600 text-sm">花龙腾航，让您的每一次飞行都成为美好回忆。我们致力于提供安全、舒适、便捷的航空服务。</p>
                </div>
                <div>
                    <h4 class="font-bold text-gray-800 mb-4">关于我们</h4>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li><a href="public_company_profile" class="hover:text-blue-500 transition">公司简介</a></li>
                        <li><a href="public_company_profile" class="hover:text-blue-500 transition">企业文化</a></li>
                        <li><a href="public_company_profile" class="hover:text-blue-500 transition">发展历程</a></li>
                        <li><a href="public_job_posting" class="hover:text-blue-500 transition">招贤纳士</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold text-gray-800 mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li><a href="public_faq" class="hover:text-blue-500 transition">常见问题</a></li>
                        <li><a href="public_baggage_regulations" class="hover:text-blue-500 transition">行李规定</a></li>
                        <li><a href="public_company_profile" class="hover:text-blue-500 transition">航班动态</a></li>
                        <li><a href="public_callus" class="hover:text-blue-500 transition">联系客服</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold text-gray-800 mb-4">联系我们</h4>
                    <ul class="space-y-2 text-sm text-gray-600">
                        <li class="flex items-center"><i class="fas fa-phone-alt mr-2 text-blue-500"></i> 客服热线: 19976338635</li>
                        <li class="flex items-center"><i class="fas fa-envelope mr-2 text-blue-500"></i> ganshenghao888@qq.com</li>
                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> 广东省广州市天河区华南农业大学</li>
                    </ul>
                    <div class="flex space-x-4 mt-4">
                        <a href="https://weixin.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="https://weibo.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="https://qq.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                            <i class="fab fa-qq"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-200 mt-8 pt-6 text-center text-sm text-gray-500">
                <p>© 2025 花龙腾航航空公司 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>
    
    <script>
        // 这里可以添加一些交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            // 示例：点击航班详情按钮显示更多信息
            const detailButtons = document.querySelectorAll('[class*="fa-info-circle"]');
            detailButtons.forEach(button => {
                button.addEventListener('click', function() {
                    alert('这里可以显示更详细的航班信息，如机型、餐食、准点率等');
                });
            });
            
            // 示例：取消订单按钮点击事件
            const cancelButton = document.querySelector('.bg-red-600');
            if (cancelButton) {
                cancelButton.addEventListener('click', function() {
                    if (confirm('确定要取消此订单吗？取消后可能无法恢复。')) {
                        alert('订单取消请求已提交，稍后会有客服与您联系确认。');
                    }
                });
            }
        });

        // Toggle user dropdown menu
        document.getElementById('user-menu').addEventListener('click', function(event) {
            event.stopPropagation(); // 防止点击事件冒泡
            document.getElementById('dropdown-menu').classList.toggle('open');
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
            const dropdown = document.getElementById('dropdown-menu');
            const userMenu = document.getElementById('user-menu');

            if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
                dropdown.classList.remove('open');
            }
        });
    </script>
</body>
</html>